<template>
  <div id="scan-option-log">
    <v-header title="操作员日志查询" :showDownloadBtn = "false" :saveShow = "false"></v-header>
    <div class="main-cont">
      <el-form label-width="100px" class="clear">
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="操作用户">
              <el-input v-model="formData.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始日期">
              <el-date-picker
                v-model="formData.beginDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="年/月/日" popper-class="zIndex-popper" size="large">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="formData.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="年/月/日" popper-class="zIndex-popper">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="1" class="query-btn">
            <el-button type="primary" size="mini" @click="queryData(currentPage)">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-table
          :data="logListTableData"
          style="width: 100%">
          <el-table-column type="index" min-width="50"></el-table-column>
          <el-table-column
            prop="userCode"
            label="姓名"
            min-width="70">
          </el-table-column>
          <el-table-column
            prop="jnlTransCode"
            label="交易代码"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="交易日期"
            min-width="100">
            <template slot-scope="scope" >
              <span>{{ scope.row.jnlDate | getLocalDate}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="交易开始时间"
            min-width="100">
            <template slot-scope="scope" >
              <span>{{ scope.row.jnlBeginTime | getLocalDate}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="交易结束时间"
            min-width="100">
            <template slot-scope="scope" >
              <span>{{ scope.row.jnlEndTime | getLocalDate}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="交易结果"
            min-width="50">
            <template slot-scope="scope" >
              <span>{{ scope.row.jnlStatus === '00' ? '成功' : '失败'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="交易数据"
            min-width="180">
            <template slot-scope="scope" >
              <el-input :rows="2" type="textarea" v-model="scope.row.jnlData" readonly></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="trafficpage">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
  import api from '../../../../api/url'
  import { VHeader } from '../../../../components'
  import ajax from '../../../../api/ajax/ajax'
  export default {
    components: {
      VHeader
    },
    computed: {
    },
    data () {
      return {
        logListTableData: [], // 表格数据
        total: 0,
        currentPage: 1,
        pageSize: 6,
        formData: {
          userName: '',
          beginDate: '',
          endDate: ''
        }
      }
    },
    methods: {
      // 获取列表数据
      getAllData (params = {}, pageNum = 1, pageSize = 6) {
        ajax.post(api.SCAN_OPTION_LOG + '?pageNum=' + pageNum + '&pageSize=' + pageSize, params).then(res => {
          this.total = res.total
          if (res.list.length > 0) {
            this.logListTableData = res.list
          } else {
          }
        }).catch(() => {})
      },
      queryData (page) {
        if (new Date(this.formData.beginDate) > new Date(this.formData.endDate)) {
          this.$message({
            showClose: true,
            message: '结束日期必须大于开始日期',
            type: 'warning'
          })
        }
        if (this.formData.beginDate !== '' && this.formData.endDate === '') {
          this.$message({
            showClose: true,
            message: '请完善日期',
            type: 'warning'
          })
        }
        if (this.formData.beginDate === '' && this.formData.endDate !== '') {
          this.$message({
            showClose: true,
            message: '请完善日期',
            type: 'warning'
          })
        }
        let params = {
          beginTime: this.formData.beginDate,
          closeTime: this.formData.endDate,
          userName: this.formData.userName
        }
        if (this.formData.beginDate !== '' && this.formData.endDate !== '') {
          params = {
            // beginTime: this.formData.beginDate + ' ' + '23:59:59',
            // closeTime: this.formData.endDate + ' ' + '23:59:59',
            beginTime: this.formData.beginDate + ' ' + '00:00:00',
            closeTime: this.formData.endDate + ' ' + '00:00:00',
            userName: this.formData.userName
          }
        }
        this.getAllData(params, page)
      },
      // 分页跳转
      handleCurrentChange (val) {
        this.queryData(val)
      }
    },
    mounted () {},
    created () {
      this.getAllData()
    },
    filters: {
      getLocalDate (t) {
        let now = new Date(t)
        let year = now.getFullYear()
        let month = now.getMonth() + 1
        let date = now.getDate()
        let hour = now.getHours()
        let minute = now.getMinutes()
        let second = now.getSeconds()
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      }
    }
  }
</script>
<style lang='stylus' rel='stylesheet/stylus' type="text/stylus">
#scan-option-log
  .main-cont
    width 100%
    height calc(100% - 62px)
    overflow: auto
    overflow-x hidden
    padding 10px 0 0 10px
  .el-container
    background #fff
  .el-form
    width 100%
    background #fff
    padding 20px 0
  .query-btn
    line-height 40px
</style>
